<template>
<!--    <div class="nav">-->
<!--      <el-input-->
<!--          placeholder="查询项目"-->
<!--          prefix-icon="el-icon-search"-->
<!--          v-model="input">-->
<!--      </el-input>-->
<!--    </div>-->
  <div class="projectCost">
    <div class="container">
      <div class="wrapper" v-for="(item,index) in list" :key="index">
        <div class="roseChart"></div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "FreeTemplate",
  data(){
    return{
      // input: '',

      list:[
        {
          resData: [
            {name: '订购费用', value: 12},
            {name: '饲养费用', value: 18},
            {name: '实验费用', value: 8},
            {name: '其他费用', value: 10},
          ],
        }, {
          resData: [
            {name: '订购费用', value: 12},
            {name: '饲养费用', value: 18},
            {name: '实验费用', value: 8},
            {name: '其他费用', value: 10},
          ],
        },{
          resData:[
            {name:'订购费用',value:12},
            {name:'饲养费用',value:18},
            {name:'实验费用',value:8},
            {name:'其他费用',value:10},
          ]
        }
      ],

    //   list:[
    //     {
    //       id:1,
    //       price:{
    //         name:'项目一',
    //         resData:[
    //           {name:'订购费用',value:12},
    //           {name:'饲养费用',value:18},
    //           {name:'实验费用',value:8},
    //           {name:'其他费用',value:10},
    //         ]
    //       }
    //     }, {
    //       id:2,
    //       price: {
    //         name: '项目二',
    //         resData: [
    //           {name: '订购费用', value: 18},
    //           {name: '饲养费用', value: 10},
    //           {name: '实验费用', value: 20},
    //           {name: '其他费用', value: 9},
    //         ]
    //       }
    //     },{
    //       id:3,
    //       price:{
    //         name:'项目三',
    //         resData:[
    //           {name:'订购费用',value:18},
    //           {name:'饲养费用',value:10},
    //           {name:'实验费用',value:20},
    //           {name:'其他费用',value:9},
    //         ]
    //       }
    //     }
    //   ]
    }
  },

  methods: {
    drawRose(){
      let roseCharts = document.getElementsByClassName('roseChart');
      for(let i in roseCharts){
        let myChart = this.$echarts.init(roseCharts[i]);
        myChart.setOption({
          color: ["#4DFFFD", "#7B3FF6", "#1F6DFE", "#34A6FE"],
          // title: {
          //   text: this.list[i].price.name,
          //   left: '70',
          //   top: 5,
          //   textStyle: {
          //     color: '#77bbbb',
          //     fontSize: 14,
          //   }
          // },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          legend: {
            type: "scroll",
            orient: "vartical",
            top: "center",
            right: '0px',
            itemWidth: 16,
            itemHeight: 8,
            itemGap: 16,
            textStyle: {
              color: '#FFFFFF',
              fontSize: 12,
            },
            data: ['订购费用', '饲养费用', '实验费用', '其他费用']
          },
          polar: {
            center:['36%','56%'],
          },
          angleAxis: {
            interval: 3, // 强制设置坐标轴分割间隔
            type: 'category',
            z: 10,
            axisLine: {show: false},
            axisLabel: {show: false},
          },
          radiusAxis: {
            min: 10,
            max: 1000,
            interval: 200,
            axisLine: {show: false},
            axisLabel: {show: false},
            splitLine: {
              lineStyle: {
                color: "#2277C3",
                width: 1,
                type: "solid"
              }
            }
          },
          calculable: true,
          series: [
            {
              type: 'pie',
              radius: ["10%", "14%"],
              center:['36%','56%'],
              hoverAnimation: false,
              labelLine: {show: false},
              data: [{
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#809DF5"
                  }
                }
              }]
            },{
              stack: 'a',
              type: 'pie',
              radius: ['20%', '80%'],
              center:['36%','56%'],
              roseType: 'area',
              zlevel:10,
              label: {show: false},
              labelLine: {show: false},
              // data: this.list[i].price.resData // 渲染每个图表对应的数据
              data: this.list[i].resData
            }]
        })
      }
    }
  },
  mounted(){
    this.drawRose()
  }

}
</script>

<style scoped>
/*.nav {*/
/*  position:fixed;*/
/*  top:70px*/
/*}*/
.projectCost {
  margin-left: 40px;
}
.projectCost .container {
    display: flex;
    width: 680px;
    height: 240px;
    background-size: 100% 100%;
  }
.projectCost .container .wrapper {
  margin-top: 20px;
  width: 340px;
  height: 180px;
  border-right: 1px solid #0B61B3;
}
.roseChart{
  width: 260px;
  height:180px;
}

</style>
